<template>
  <div class="charts-container">
    <div id="myChart1" class="chart"></div>
    <div id="myChart2" class="chart"></div>
    <div id="myChart3" class="chart"></div>
    <div id="myChart4" class="chart"></div>
  </div>
</template>

<script>
import axios  from 'axios';
import * as echarts from "echarts"
export default {
  name: 'application',
  data() {
    return {
    }
  },
  async mounted() {
    await this.initChart1();
    await this.initChart2();
    await this.initChart3();
    await this.initChart4();
  },
  methods:{
    initChart1() {
      var mychart = echarts.init(document.getElementById('myChart1'));
      var jobNames = [];
      var jobCounts = [];

      return axios.get("http://62.234.193.187:8081/echarts/echarts/echart1")
        .then(function (res) {
          var response = res.data.res;
          for (var i = 0; i < response.length; i++) {
            jobNames.push(response[i].job_title);
            jobCounts.push(response[i].count);
          }

          mychart.setOption({
            title: {
              text: '各岗位招聘人数',
              left: 'center'
            },
            polar: {
              radius: [30, '80%']
            },
            angleAxis: {
              max: 4.5,
              startAngle: 75
            },
            radiusAxis: {
              type: 'category',
              data: jobNames,
              axisLabel: {
                interval: 0,
                rotate: 0
              }
            },
            tooltip: {},
            series: {
              type: 'bar',
              data: jobCounts,
              coordinateSystem: 'polar',
              label: {
                show: false,
                position: 'middle',
                formatter: '{b}: {c}'
              }
            }
          });
        })
        .catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“各岗位招聘人数”数据失败，请稍后重试。');
        });
    },
    initChart2() {
      var mychart = echarts.init(document.getElementById('myChart2'));
      var cities = [];
      var seriesData = [];
      var jobName=[];
      return axios.get("http://62.234.193.187:8081/echarts/echarts/jobAvgSalary")
        .then(function (res) {
          var response = res.data;
          cities=response.map(item => item.city);
          jobName=['软件工程师','物流专员','新媒体运营','电气工程师','数据库管理员','电力工程师','客服经理','Java']
          seriesData=jobName.map(item => ({
            name: item,
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: response.map(point=> point[item])
          }))
          mychart.setOption({
            title: {
              text: '各城市各岗位平均薪资（K/月）',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
              }
            },
          /*   legend: {}, */
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'category',
              data: cities
            },
            series:seriesData
          });
        })
        .catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“各城市不同岗位平均薪资”数据失败，请稍后重试。');
        });
    },
    initChart3() {
      var mychart = echarts.init(document.getElementById('myChart3'));
      var experiences = [];
      var seriesData = [];
      var jobName=[];
      return axios.get("http://62.234.193.187:8081/echarts/echarts/jobExperience")
        .then(function (res) {
          var response = res.data;
          console.log(response)
          jobName=['软件工程师','物流专员','新媒体运营','电气工程师','数据库管理员','电力工程师','客服经理','Java']
          experiences=response.map(item=>item.experience);
          seriesData=jobName.map(item => ({
            name: item,
            type: 'bar',
           /*  stack: 'Total', */
            data: response.map(point=> point[item])
          }))
          mychart.setOption({
            title: {
              text: '经验岗位平均薪资',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: experiences,
              axisLabel: {
                rotate: 25 // 或 90
              }
            },
            yAxis: {
              type: 'value'
            },
            series: seriesData
          });
        }).catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“各城市不同岗位平均薪资”数据失败，请稍后重试。');
        });
    },
    initChart4() {
      var mychart = echarts.init(document.getElementById('myChart4'));
      var educations = [];
      var seriesData = [];
      var jobName=[];
      return axios.get("http://62.234.193.187:8081/echarts/echarts/jobEducation")
        .then(function (res) {
          var response = res.data;
          console.log(response)
          jobName=['软件工程师','物流专员','新媒体运营','电气工程师','数据库管理员','电力工程师','客服经理','Java']
          educations=response.map(item=>item.educational);
          seriesData=jobName.map(item => ({
            name: item,
            type: 'line',
            connectNull: true,
            /*  stack: 'Total', */
            data: response.map(point=> point[item])
          }))
          mychart.setOption({
            title: {
              text: '学历行业平均薪资对比',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: educations
            },
            yAxis: {
              type: 'value'
            },
            series: seriesData
          });
        }).catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“学历行业平均薪资”数据失败，请稍后重试。');
        });
    }
  }
}
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行2个图表 */
  gap: 20px; /* 图表间距 */
  padding: 20px;
}

.chart {
  width: 100%;
  height: 400px;
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  background-color: #fff; /* 背景色 */
}
</style>
